<template>
  <div class="yuangong">

    <div class="main">
      <el-tabs v-model="activeName" @tab-click="tabChange" class="el-tab">
        <el-tab-pane label="查看员工" name="first" :class="{'animation-in':checkAnimation}">
          <div class="first-header">
            <div class="sort">
              <ul>
                <li><a :class="{active:activeIndex=='0'?true:false}" href="javascript:;" @click="sort('0')">默认排序</a></li>
                <li><a :class="{active:activeIndex=='1'?true:false}" href="javascript:;" @click="sort('1')">年龄升序</a></li>
                <li><a :class="{active:activeIndex=='2'?true:false}" href="javascript:;" @click="sort('2')">年龄降序</a></li>
                <li><a :class="{active:activeIndex=='3'?true:false}" href="javascript:;" @click="sort('3')">入职日期升序</a></li>
                <li><a :class="{active:activeIndex=='4'?true:false}" href="javascript:;" @click="sort('4')">入职日期降序</a></li>
              </ul>
              <ul>
                <li><a :class="{active:activeIndex2=='0'?true:false}" href="javascript:;" @click="divide('0')">查看全部</a></li>
                <li><a :class="{active:activeIndex2=='1'?true:false}" href="javascript:;" @click="divide('1')">男</a></li>
                <li><a :class="{active:activeIndex2=='2'?true:false}" href="javascript:;" @click="divide('2')">女</a></li>
              </ul>
            </div>
            <div class="search-box" :class="{'animation-search-box':showSearch,'animation-search-box-hide':!showSearch&&autoPlay}">
              <input ref="searchEnter" v-model="keywords" type="text" class="search-input" placeholder="请输入姓名、工号或RFID卡号，回车搜索" @keyup.enter="search">
              <div @click="showSearchBox()"><i :class="{'el-icon-search':!showSearch,'el-icon-close':showSearch}"></i></div>
            </div>
          </div>

          <el-table :data="tableData" frame=hsides max-height="510" :header-cell-style="{'text-align':'center','background-color':'#ecebeb'}" :row-style="{'height':'20px'}" :cell-style="{'text-align':'center','padding': '5px'}" style="width: 100%">
            <el-table-column prop="id" label="工号" min-width="8%">
            </el-table-column>
            <el-table-column prop="username" label="姓名" min-width="8%">
            </el-table-column>
            <el-table-column prop="id_Card_Number" label="身份证号" min-width="20%">
            </el-table-column>
            <el-table-column prop="rfid" label="RRID卡号" min-width="18%">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="联系电话" min-width="15%">
            </el-table-column>
            <el-table-column prop="state" label="在职状态" min-width="9%">
            </el-table-column>
            <el-table-column prop="operation_Level" label="操作等级" min-width="9%">
            </el-table-column>
            <el-table-column label="操作" min-width="15%">
              <template slot-scope="scope">
                <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="check(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" @click="lock(scope.row)">{{scope.row.mylock==1?'锁定':'解锁'}}</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="first-footer">
            <el-pagination layout="prev, pager, next" :total="pageTotal" :current-page.sync="currentPage" :page-size="pageSize" hide-on-single-page @current-change="pageChange">
            </el-pagination>
          </div>

          <!-- 查看员工信息 -->
          <el-dialog title="查看员工信息" :visible.sync="checkDialogVisible" width="30%" top="3%">
            <el-form v-model="userForm" ref="userForm" label-width="100px" class="demo-userForm">
              <el-form-item label="员工姓名" prop="username">
                <el-input v-model="userForm.username" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="id_Card_Number">
                <el-input v-model="userForm.id_Card_Number" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="RFID卡号" prop="rfid">
                <el-input v-model="userForm.rfid" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phoneNumber">
                <el-input v-model="userForm.phoneNumber" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="userForm.password" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="userForm.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期" prop="birthday">
                <el-input v-model="userForm.birthday" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="入职日期" prop="jointime">
                <el-input v-model="userForm.jointime" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="在职状态" prop="state">
                <el-select v-model="userForm.state">
                  <el-option label="在职" value="0"></el-option>
                  <el-option label="未在职" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作等级" prop="operation_Level">
                <el-select v-model="userForm.operation_Level">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="99" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="照片">
              </el-form-item>
            </el-form>
          </el-dialog>

          <!-- 修改员工信息 -->
          <el-dialog title="修改员工信息" :visible.sync="UpdateDialogVisible" width="30%">
            <el-form :model="updateForm" ref="updateForm" label-width="100px" class="demo-userForm">
              <el-form-item label="员工姓名" prop="username">
                <el-input v-model="updateForm.username" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="id_Card_Number">
                <el-input v-model="updateForm.id_Card_Number" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="phoneNumber" required>
                <el-input v-model="updateForm.phoneNumber"></el-input>
              </el-form-item>
              <el-form-item label="在职状态" prop="state" required>
                <el-select v-model="updateForm.state">
                  <el-option label="在职" value="在职"></el-option>
                  <el-option label="未在职" value="未在职"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="updateSubmit(updateForm)">确 定</el-button>
            </span>
          </el-dialog>

        </el-tab-pane>
        <!-- 添加员工 -->
        <el-tab-pane label="添加员工" name="second" class="animation-in">
          <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="add-form">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="form-left">
                  <el-form-item label="员工姓名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号" prop="id_Card_Number">
                    <el-input v-model="addForm.id_Card_Number"></el-input>
                  </el-form-item>
                  <el-form-item label="RFID卡号" prop="rfid">
                    <el-input v-model="addForm.rfid"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="pwd">
                    <el-input v-model="addForm.pwd"></el-input>
                  </el-form-item>
                  <el-form-item label="入职日期" prop="jointime">
                    <el-date-picker v-model="addForm.jointime" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="操作等级" prop="operation_Level">
                    <el-select v-model="addForm.operation_Level" placeholder="请选择">
                      <el-option label="1" value="1"></el-option>
                      <el-option label="99" value="99"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="form-right">
                  <el-form-item label="性别">
                    <el-radio-group v-model="addForm.gender">
                      <el-radio label="男"></el-radio>
                      <el-radio label="女"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker v-model="addForm.birthday" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input v-model="addForm.phoneNumber"></el-input>
                  </el-form-item>
                  <el-form-item label="在职状态" prop="state">
                    <el-select v-model="addForm.state" placeholder="请选择">
                      <el-option label="在职" value="在职"></el-option>
                      <el-option label="未在职" value="未在职"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="addSubmit('addForm')">添加</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "yuangong",
  data() {
    return {
      showSearch: false, //搜索框
      autoPlay: false,
      activeName: 'first',  //标签页
      checkDialogVisible: false,  //查看员工信息dialog框
      UpdateDialogVisible: false, //修改员工信息dialog框
      checkAnimation: true,
      keywords: '',   //搜索词
      pageTotal: 0,
      pageSize: 10, //每页显示10条
      currentPage: 1,
      activeIndex: 0,
      activeIndex2: 0,
      requestData:[],
      imageUrl: '',
      tableData: [],
      currentData: [],
      userForm: {}, //查看员工信息
      updateForm: {
        username: '',
        id_Card_Number: '',
        phoneNumber: '',
        state: '',
      },
      addForm: {
        gender: '男',
      },
      rules: {
        username: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        id_Card_Number: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '证件号码格式错误', trigger: 'blur' }
        ],
        rfid: [
          { required: true, message: '请输入RFID卡号', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        jointime: [
          { required: true, message: '请输入入职日期', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '请输入出生日期', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择在职状态', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.requestAll('1')
  },
  methods: {
    requestAll(page) {
      this.$axios({
        method: 'get',
        url: '/findUserAll',
        params: {
          page: page,
          limit: this.pageSize,
        },
      }).then((res) => {
        this.pageTotal = res.data.count //总条数
        this.tableData = res.data.data.filter((props) => {
          delete props.photo_Path
          return true;
        })
        this.loading = false
      })
        .catch((err) => {
          console.log(err);
        })
    },
    divide(key) {
      this.activeIndex = 0
      this.currentPage = 1;
      if ( parseInt(key)) {
        this.activeIndex2 = key == 1 ? 1:2
        this.$axios({
          method: 'post',
          url: '/findUsersex',
          data: {
            gender: key == 1 ? '男' : '女',
          },
        }).then((res) => {
          this.requestData = res.data.data
          this.tableData = this.requestData.slice(0,this.pageSize)
          this.pageTotal = res.data.data.length
        })
          .catch((err) => {
            console.log(err);
          })
      } else {
        this.activeIndex2 = 0
        this.requestAll('1')
      }

    },
    sort(key) {
      this.activeIndex2 = 0
      this.currentPage = 1;
      switch (key) {
        case '0':
          this.activeIndex = 0
          this.requestAll('1')
          break;
        case '1':
          {
            this.activeIndex = 1
            this.$axios({
              method: 'post',
              url: '/findUserage',
            }).then((res) => {
              this.requestData = res.data.data.reverse()
              this.tableData = this.requestData.slice(0,this.pageSize)
              this.pageTotal = res.data.data.length
            })
              .catch((err) => {
                console.log(err);
              })
          }
          break;
        case '2':
          {
            this.activeIndex = 2
            this.$axios({
              method: 'post',
              url: '/findUserage',
            }).then((res) => {
              this.requestData = res.data.data
              this.tableData = this.requestData.slice(0,this.pageSize)
              this.pageTotal = res.data.data.length
            })
              .catch((err) => {
                console.log(err);
              })
          }
          break
        case '3':
          {
            this.activeIndex = 3
            this.$axios({
              method: 'post',
              url: '/findUserdate',
            }).then((res) => {
              this.requestData = res.data.data
              this.tableData = this.requestData.slice(0,this.pageSize)
              this.pageTotal = res.data.data.length
            })
              .catch((err) => {
                console.log(err);
              })
          }
          break;
        case '4':
          {
            this.activeIndex = 4
            this.$axios({
              method: 'post',
              url: '/findUserdate',
            }).then((res) => {
              this.requestData = res.data.data.reverse()
              this.tableData = this.requestData.slice(0,this.pageSize)
              this.pageTotal = res.data.data.length
            })
              .catch((err) => {
                console.log(err);
              })
          }
          break

      }
    },
    showSearchBox() {
      if(this.showSearch) {
        this.keywords = ''
        this.tableData = this.currentData
      } else {
        this.currentData = this.tableData
      }
      this.showSearch = !this.showSearch
      if (this.showSearch === false) {
        this.autoPlay = true
      }
      
    },
    search() {
      if (!this.keywords.toString().length) {
        this.$message({
          message: '请输入',
          type: 'warning'
        });
      } else if (this.keywords < 1000) {   // 工号
        this.$axios({
          method: 'post',
          url: '/selectUserid',
          data: {
            id: this.keywords
          },
        }).then((res) => {
          this.tableData = res.data.data
          this.pageTotal = res.data.data.length
        })
          .catch((err) => {
            console.log(err);
          })
      } else if (this.keywords.match(/^[\u4e00-\u9fa5]+$/)) {   //姓名
        this.$axios({
          method: 'post',
          url: '/selectUsername',
          data: {
            username: this.keywords
          },
        }).then((res) => {
          this.tableData = res.data.data
          this.pageTotal = res.data.data.length
        })
          .catch((err) => {
            console.log(err);
          })
      } else {          //RFID
        this.$axios({
          method: 'post',
          url: '/selectUserrfid',
          data: {
            rfid: this.keywords
          },
        }).then((res) => {
          this.tableData = res.data.data
          this.pageTotal = res.data.data.length
        })
          .catch((err) => {
            console.log(err);
          })
      }
    },
    tabChange() {
      this.showSearch = false
      this.autoPlay = false
    },
    pageChange(val) {
      // this.tableData = []
      if (this.activeIndex==0 && this.activeIndex2==0) {
        this.requestAll(val)
      } else if (this.activeIndex==0 && this.activeIndex2!=0) {
        this.tableData = this.requestData.slice((val-1)*this.pageSize, val*this.pageSize)
      } else if (this.activeIndex!=0 && this.activeIndex2==0) {
        this.tableData = this.requestData.slice((val-1)*this.pageSize, val*this.pageSize)
      }
    },
    check(row) {
      this.checkAnimation = false
      this.checkDialogVisible = true
      this.userForm = row
    },
    update(row) {
      this.checkAnimation = false
      this.UpdateDialogVisible = true
      this.updateForm.id = row.id
      this.updateForm.username = row.username
      this.updateForm.id_Card_Number = row.id_Card_Number
      this.updateForm.phoneNumber = row.phoneNumber
      this.updateForm.state = row.state
      this.updateForm.operation_Level = row.operation_Level
    },
    updateSubmit(form) {
      this.$axios({
        method: 'post',
        url: '/updateUser',
        data: {
          id: form.id,
          phoneNumber: form.phoneNumber,
          state: form.state,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.UpdateDialogVisible = false
          this.tableData.filter((item) => {
            if (item.id == form.id) {
              item.phoneNumber = form.phoneNumber
              item.state = form.state
            }
          })
          this.$refs[form].resetFields()
        }
      })
        .catch((err) => {
          console.log(err);
        })
    },
    lock(row) {
      var msg = row.mylock == 0 ? '解锁':'锁定'
      this.$confirm('确定' + msg + '该员工吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       this.$axios({
        method: 'get',
        url: '/Userlock',
        params: {
          id: row.id,
          mylock: row.mylock == 0 ? '1' : '0'
        },
      }).then((res) => {
        if (res.data.code == 200) {
          row.mylock = row.mylock == 0 ? '1' : '0'
          this.$message({
            message: row.mylock == 0 ? '锁定成功' : '解锁成功',
            type: 'success'
          });
        }
      })
        .catch((err) => {
          console.log(err);
        })
      }).catch(() => {
             
      });
      
    },
    addSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: '/findUserAdd',
            data: this.addForm,
          }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.$refs[form].resetFields()
            }
          })
            .catch((err) => {
              console.log(err);
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
    },
    
    beforeUpload(file) {
      console.log(file);
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
    }
  },
}
</script>

<style lang="less" scoped>
.yuangong {
  width: 100%;
  height: 100%;
}
.main {
  position: relative;
  width: 90%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border-radius: 15px;
  padding: 10px 20px;


  .first-header {
    .sort {
      margin: 10px 0 20px;
      ul {
        list-style-type: none;
        margin: 10px 0;
        padding: 0;
        li {
          display: inline-block;
          margin: 0 8px;
          a {
            padding: 1px 5px;
            color: #000000;
            font-size: 15px;
          }
          .active {
              background: blueviolet;
              color: #ffffff;
              border-radius: 3px;
          }
        }
      }
    }
    // 搜索框
    .search-box {
      float: left;
      position: absolute;
      right: 5%;
      top: 10px;
      border-radius: 15px;
      padding: 0;
      width: 0%;
      i {
        position: absolute;
        right: 10px;
        top: 10px;
      }
      .search-input {
        outline: none;
        border: none;
        background-color: rgba(187, 179, 179, 0);
        width: 100%;
        padding: 0;
      }
    }
    .animation-search-box {
      animation: search-show 0.5s linear;
      animation-fill-mode: forwards;
    }
    .animation-search-box-hide {
      animation: search-hide 0.5s linear;
      animation-fill-mode: forwards;
    }
    @keyframes search-show {
      0% {
        width: 0%;
        background-color: rgba(218, 218, 218, 0);
        padding: 5px 0;
        margin-top: -5px;
      }
      70% {
        background-color: #ecebeb;
      }
      100% {
        width: 30%;
        padding: 5px 10px;
        margin-top: -5px;
        background-color: #ecebeb;
      }
    }
    @keyframes search-hide {
      0% {
        width: 30%;
        padding: 5px 10px;
        margin-top: -5px;
        background-color: #ecebeb;
      }
      30% {
        background-color: #ecebeb;
      }
      100% {
        background-color: rgba(218, 218, 218, 0);
        padding: 5px 0;
        margin-top: -5px;
        width: 0%;
      }
    }
  }
  
  .el-tab {    
    /deep/.el-tabs__active-bar {
      background: blueviolet;
    }
    /deep/.el-tabs__item.is-active {
      color: blueviolet;
    }
    .animation-in {
      animation: add-in 0.7s ease;
      animation-fill-mode: forwards;

      @keyframes add-in {
        0% {
          transform: translateY(100%);
        }
        100% {
          transform: translateY(0%);
        }
      }
    }
  }

  .first-footer {
    text-align: center;
    margin: 8px 0 10px;
  }

  .add-form {
    margin-top: 20px;
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>